{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form class="layui-form" lay-filter="addForm" autocomplete="off">
                    <!--目录-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">目录</label>
                        <div class="layui-input-block">
                            <input type="text" name="dir" placeholder="请输入目录" class="layui-input" value="" lay-verify='required'>
                        </div>
                    </div>
                    <!--名称-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" placeholder="请输入名称" class="layui-input" value="" lay-verify='required'>
                        </div>
                    </div>
                    <!--描述内容-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述内容</label>
                        <div class="layui-input-block">
                            <input type="text" name="describe" placeholder="请输入描述内容" class="layui-input" value="" lay-verify='required'>
                        </div>
                    </div>
                    <!--Logo-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">Logo</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="logo_image" class="layui-input">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="logo_image">上传图片</button>
                                <div class="layui-upload-list" id="logo_imagePreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('', 'logo_image')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--演示二维码-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">演示二维码</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="qrcode_image" class="layui-input">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="qrcode_image">上传图片</button>
                                <div class="layui-upload-list" id="qrcode_imagePreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('', 'qrcode_image')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--应用截图-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">应用截图</label>
                        <div class="layui-input-block">
                            <input type="hidden" name="style_images" class="layui-input" value="">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn layui-btn-normal" id="style_images">上传图片</button>
                                <div class="layui-upload-list" id="style_imagesPreview" style="display: flex;">
                                    <!--加载默认图片-->
                                    <script>
                                        getImagesHtmlForEdit('', 'style_images')
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--销售价-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">销售价</label>
                        <div class="layui-input-block">
                            <input type="number" name="sell_price" placeholder="请输入销售价" class="layui-input" value="0.00" lay-verify='required'>
                        </div>
                    </div>
                    <!--市场价-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">市场价</label>
                        <div class="layui-input-block">
                            <input type="number" name="market_price" placeholder="请输入市场价" class="layui-input" value="0.00" lay-verify='required'>
                        </div>
                    </div>
                    <!--版本-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">版本</label>
                        <div class="layui-input-block">
                            <input type="text" name="version" placeholder="请输入版本" class="layui-input" value="" lay-verify='required'>
                        </div>
                    </div>
                    <!--小程序模板-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">小程序模板</label>
                        <div class="layui-input-block">
                            <input type="number" name="template_id" placeholder="请输入小程序模板" class="layui-input" value="0">
                        </div>
                    </div>
                    <!--体验天数-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">体验天数</label>
                        <div class="layui-input-block">
                            <input type="number" name="expire_day" placeholder="请输入体验天数" class="layui-input" value="0" lay-verify='required'>
                        </div>
                    </div>
                    <!--详情介绍-->
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">详情介绍</label>
                        <div class="layui-input-block">
                            <script id="content" name="content" type="text/plain" style="width:100%;height:500px;"></script>
                            <script>
                                //实例化编辑器
                                UE.getEditor('content');
                            </script>
                        </div>
                    </div>
                    <!--应用类型-->
                    <div class='layui-form-item'>
                        <label class='layui-form-label'>应用类型</label>
                        <div class='layui-input-block'>
                            <input type='checkbox' name='types_mini_program' lay-skin='primary' title='小程序'>
                            <input type='checkbox' name='types_app' lay-skin='primary' title='APP'>
                            <input type='checkbox' name='types_h5' lay-skin='primary' title='h5'>
                            <input type='checkbox' name='types_official' lay-skin='primary' title='公众号'>
<!--                            <input type='checkbox' name='types_system' lay-skin='primary' title='系统'>-->

                        </div>
                    </div>
                    <!--平台管理:0=关闭,1=开启-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">平台管理</label>
                            <div class="layui-input-block" id="is_manage">
                                <select name="is_manage" lay-verify="required">
                                    <option value="" >请选择平台管理</option>
                                    <option value="0" selected>关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--接入方式:0=独立应用,1=开放平台-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">接入方式</label>
                            <div class="layui-input-block" id="is_openapp">
                                <select name="is_openapp" lay-verify="required">
                                    <option value="" >请选择接入方式</option>
                                    <option value="0" selected>独立应用</option>
                                    <option value="1">开放平台</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--微信支付:0=关闭,1=开启-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">微信支付</label>
                            <div class="layui-input-block" id="is_wechat_pay">
                                <select name="is_wechat_pay" lay-verify="required">
                                    <option value="" >请选择微信支付</option>
                                    <option value="0" selected>关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--支付宝支付:0=关闭,1=开启-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">支付宝支付</label>
                            <div class="layui-input-block" id="is_alipay_pay">
                                <select name="is_alipay_pay" lay-verify="required">
                                    <option value="" >请选择支付宝支付</option>
                                    <option value="0" selected>关闭</option>
                                    <option value="1">开启</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--排序-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input type="number" name="sort" placeholder="请输入排序" class="layui-input" value="0">
                        </div>
                    </div>
                    <!--状态:-1=未安装,0=关闭,1=开启-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block" id="status">
                                <select name="status" lay-verify="required">
                                    <option value="" >请选择状态</option>
                                    <option value="-1">未安装</option>
                                    <option value="0">关闭</option>
                                    <option value="1" selected>开启</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;

        //Logo单图上传
        bw_upload(upload, 'logo_image', 'image');
        //演示二维码单图上传
        bw_upload(upload, 'qrcode_image', 'image');
        //应用截图多图上传
        bw_upload(upload, 'style_images', 'images');


        //监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;

            if(!data.dir) {layer.msg('目录不能为空', {icon: 2});return false}
            if(!data.title) {layer.msg('名称不能为空', {icon: 2});return false}
            if(!data.describe) {layer.msg('描述内容不能为空', {icon: 2});return false}
            if(!data.logo_image) {layer.msg('Logo不能为空', {icon: 2});return false}
            if(!data.qrcode_image) {layer.msg('演示二维码不能为空', {icon: 2});return false}
            if(!data.style_images) {layer.msg('应用截图不能为空', {icon: 2});return false}
            if(!data.sell_price) {layer.msg('销售价不能为空', {icon: 2});return false}
            if(!data.market_price) {layer.msg('市场价不能为空', {icon: 2});return false}
            if(!data.version) {layer.msg('版本不能为空', {icon: 2});return false}
            if(!data.expire_day) {layer.msg('体验天数不能为空', {icon: 2});return false}
            //应用类型 多选转为字符串
            var types = [];
            if(data.types_mini_program && data.types_mini_program == 'on') {
                types.push('mini_program');
                delete data.types_mini_program;
            }
            if(data.types_app && data.types_app == 'on') {
                types.push('app');
                delete data.types_app;
            }
            if(data.types_h5 && data.types_h5 == 'on') {
                types.push('h5');
                delete data.types_h5;
            }
            if(data.types_official && data.types_official == 'on') {
                types.push('official');
                delete data.types_official;
            }
            if(data.types_system && data.types_system == 'on') {
                types.push('system');
                delete data.types_system;
            }

            data.types = types.join(',');


            //ajax调用后台接口
            bwajax.post("{:Url('add')}", data)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });
</script>
{/block}